import { useEffect } from "react";
import { Space, Divider, Table, Popconfirm, Tag, Avatar } from "antd";
import { Card as SemiCard } from "@douyinfe/semi-ui";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";

import { AllMembers, ChangeMemberStatus } from "../../_graphql/member";

const { Column } = Table;

const MemberPage = () => {
    const { windowInnerHeight, graphqlFetchPlatform } = useModel("global");
    const { kuboUrl } = useModel("kubo");

    const state = useReactive({
        loading: false,
        submitLoading: false,
        members: [],
    });

    const loadData = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({ query: AllMembers, variables: {} });
        state.members = res?.a?.nodes || [];
        state.loading = false;
    };

    useEffect(() => {
        loadData();
    }, []);

    const handleChangeStatus = async (record) => {
        state.submitLoading = true;
        let res = await graphqlFetchPlatform({ query: ChangeMemberStatus, variables: { miIdno: record.miIdno, miStat: !record.miStat } });
        if (res) {
            let members = JSON.parse(JSON.stringify(state.members));
            let index = members.findIndex((item) => item.miIdno === record.miIdno);
            members[index] = { ...members[index], miStat: !record.miStat };
            state.members = members;
        }
        state.submitLoading = false;
    };

    const renderAvatar = (_, r, i) => {
        let avatarUrl = kuboUrl && _ ? kuboUrl + _ : <Jdenticon size="24" value={r.miName || ""} />;
        return <Avatar src={avatarUrl} />;
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>中心成员列表</span>}
                headerExtraContent={<Space split={<Divider type="vertical" />} size={4}></Space>}
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
            >
                <Table
                    loading={state.loading}
                    dataSource={state.members}
                    rowKey="miIdno"
                    bordered
                    size="small"
                    pagination={false}
                    scroll={{ y: cardBodyHeight - 40 }}
                >
                    <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    <Column title="头像" dataIndex="miAvat" align="center" width={100} render={renderAvatar} />
                    <Column title="姓名" dataIndex="miName" align="left" />
                    <Column title="性别" dataIndex="miRoge" align="center" width={80} />
                    <Column title="手机号" dataIndex="miPhon" align="center" width={160} />
                    <Column title="身份证号" dataIndex="miIdno" align="center" width={180} />
                    <Column title="所在地区" dataIndex="miPrin" align="left" render={(_, r) => (r.miPrin || "") + (r.miCity || "") + (r.miDist || "")} />
                    <Column title="加入方式" dataIndex="miJoty" align="center" width={120} />
                    <Column
                        title="审核状态"
                        dataIndex="miStat"
                        align="center"
                        width={100}
                        render={(_, r) => (
                            <Popconfirm
                                title={`确认要改变审核状态吗?`}
                                placement="topRight"
                                okButtonProps={{ loading: state.submitLoading }}
                                onConfirm={() => handleChangeStatus(r)}
                            >
                                {_ ? <Tag color="#87d068">已审核</Tag> : <Tag color="#f50">待审核</Tag>}
                            </Popconfirm>
                        )}
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default MemberPage;
